<template>
<div>
    <div class="header">
	<a class="black" href="#/novellist" ></a>
	<span class="title">{{title.novelname}}</span>
	<span class="home"><a href="/front/myVue%20-%20副本/static" class="a">首页</a></span>
</div>
<div class="clear"></div>
<div class="books">
    <div class="book_info">
<div class="cover"><img :src="title.src" width="80" height="100" ></div>
<div class="book_box">
<dl class="dl">
		        <dt class="dt">{{title.novelname}}</dt>
		        <dd class="dd_box"><span class="span">作者：{{title.author}}</span><span class="span">分类：{{title.type}}</span></dd>
		        <dd class="dd_box"><span class="span">状态：完结</span><span></span></dd>
                <dd  class="dd_box"><span style="width: 100%;" class="span">当前阅读：<a style="color:gold" @click=" href1(record)">{{record}}</a></span></dd>
		    </dl>
</div>
    </div>
    <div class="readlink">
        <a class="rl" >开始阅读</a>
        <a rel="nofollow" class="rw">加入书架</a>
        <a class="rr" >我的书架</a>
        </div>
<div class="book_about">
		<dl class="dl1">
			<dt class="dt1">内容简介</dt>
			<dd class="dd1">    {{title.novelcontent}}
</dd>
		</dl>
	</div>
    <div class="book_last">
        <dl>
<dt class="dt2">最新章节目录</dt>
<dd class="dd2" v-for="(ele,i) in title.noveltitle" @click="href(ele)"><a  class="a3">{{ele}}</a></dd>
        </dl>
    </div>
</div>
</div>


</template>
<script>
import axios from 'axios'
 export default {

    data() {
      return {
        record:localStorage.getItem("novelname"+this.$route.query.id),
        index:true,
        title:{
            src:'',
            type:'',
            author:'',
            novelname:'',
            novelcontent:'古幽大陆，万族林立，一个小镇中的少年，坠崖重生，掀起一场惊动千古的浪潮。作者：半步沧桑所写的《至尊剑皇》无弹窗免费全文阅读为转载作品,章节由网友发布。',
            noveltitle:[],
            noveltitle1:[]
        }
      }
    },


    created(){
        this.iflogin1();
        this.findbyname();

    },
    methods:{
        iflogin1() {
        let url='http://localhost:8098/iflogin';
        let param = `token=${localStorage.getItem("token")}`;
        axios.post(url,param).then(resp=>{
          let result=resp.data;
          if(result.code===200){


          }else{
           this.$router.push("/login")
        this.$message({
            showClose: true,
          message: '未登录或者登录过期，请先登录',
          type: 'error'
        });

          }
        })
        // alert(123)

},
        href(i){

            localStorage.setItem("novelname"+this.$route.query.id,i)

            this.$router.push({path:'/novel',query:{id:this.$route.query.id+"%"+i}})
        },
        href1(i){

if(this.record==='您未阅读，请先阅读'){
    this.$message({
            showClose: true,
          message: '您未开始阅读，请先阅读',
          type: 'error'
        });
}else{  this.$router.push({path:'/novel',query:{id:this.$route.query.id+"%"+i}})}

        },
        findbyname(){
           let url='http://localhost:8098/getNovelName';
              let param = `novelname=${this.$route.query.id}`;
              axios.post(url,param).then(resp=>{
                let result=resp.data;
                console.log(result)
                const list=result.data;
                for(let i=1;i<list.length;i++){
                    this.title.noveltitle1+=(list[i]+",")
                }
                this.title.noveltitle=this.title.noveltitle1.split(",")
               console.log(this.title.noveltitle)
               this.title.novelname=list[0].name;
               this.title.author=list[0].writer;
               this.title.src=list[0].picture
               this.title.novelcontent=list[0].description
              })
              if(localStorage.getItem("novelname"+this.$route.query.id)==null){
                this.record='您未阅读，请先阅读'
              }
              if(localStorage.getItem("flushbook1")==null){
    window.location.reload();
    localStorage.setItem("flushbook1",1)
  }else{
    localStorage.removeItem("flushbook1")
  }

        }
    }
}

</script>

<style scoped>
.a3{
    color: #222;
    text-decoration: none;
}
.dd2 {
    line-height: 42px;
    margin: 0 10px;
    border-bottom: 1px solid #EEE;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.dt2 {
    background: #00b1ec;
    line-height: 40px;
    color: #fff;
    padding-left: 10px;
    border-bottom: 1px solid #EEE;
}
dl {
    zoom: 1;
    margin: 0;
    padding: 0;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.dd1 {
    padding: 10px;
    line-height: 150%;
    color: #888;
}
.dt1{
    background: #00b1ec;
    line-height: 40px;
    color: #fff;
    padding-left: 10px;
    border-bottom: 1px solid #EEE;
}
.dl1{
        zoom: 1;
    margin: 0;
    padding: 0;
        display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.rw{
    float: left;
    display: block;
    width: 32%;
    text-align: center;
    background: #080808;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
}
.rr{
    float: right;
    margin-left: 2%;
         float: left;
    display: block;
    width: 32%;
    text-align: center;
    background: #000000;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
}
.rl{
    margin-right: 2%;
        float: left;
    display: block;
    width: 32%;
    text-align: center;
    background: #050505;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
}
.readlink {
    padding: 0;
        zoom: 1;
    margin: 10px;
    line-height: 38px;
    overflow: hidden;
}
.span {
    display: block;
    width: 50%;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.cover {
    position: absolute;
    left: 0;
    top: 0;
}
dd {
    zoom: 1;
    margin: 0;
    padding: 0;
    line-height: 22px;
    color: #888;
}
.dt {
    font-size: 16px;
    margin-bottom: 10px;
}
.dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.book_box {
    padding-left: 90px;
    height: 110px;
}

.book_info {
        zoom: 1;
    margin: 10px;
    display: block;
    position: relative;
    overflow: hidden;
}
.clear {
    zoom: 1;
    margin-bottom: 10px;
}
.a{
        text-decoration: none;
        color: #fff;
}
.home {
    color: #fff;
    position: absolute;
    width: 50px;
    height: 44px;
    text-align: center;
    right: 0;
    top: 0;
}
.title {
    height: 44px;
    margin: 0 50px 0 50px;
    text-align: center;
    color: #fff;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.header .black:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    margin: 16px 0 0 16px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
}
.black {
    position: absolute;
    width: 50px;
    height: 44px;
    left: 0;
    top: 0;
}
.header {
    zoom: 1;
    margin: 0;
    padding: 0;
    background: #00b1ec;
    line-height: 44px;
    display: block;
    position: relative;
    font-size: 16px;
}
</style>
